<template>
	<view>
		<view class="u-p-x-40 bg-white">
			<u-form :model="form" ref="uForm" label-position="left" labelWidth="180">
				<view class="">
					<u-form-item label="推荐人省市区" prop="tj_region">
						<u-input v-model="form.tj_region" type="select" @click="show_Tj_Region = true"
							placeholder="请选择推荐人省市区" />
					</u-form-item>
					<u-form-item label="被推荐人省市区" prop="region">
						<u-input v-model="form.region" type="select" @click="showRegion = true"
							placeholder="请选择被推荐人省市区" />
					</u-form-item>
					<u-form-item label="营业执照" prop="business_image">
						<u-upload :auto-upload="false" ref="uUpload1" max-count="1" width="150" height="150"></u-upload>
					</u-form-item>
					<u-form-item label="注册公司省市区" prop="reg_region">
						<u-input v-model="form.reg_region" type="select" @click="showRegRegion = true"
							placeholder="请选择注册公司省市区" />
					</u-form-item>
					<u-form-item label="注册公司详细地址" prop="reg_detail">
						<u-input v-model="form.reg_detail" type="textarea" height="50" placeholder="请填写注册公司详细地址" />
					</u-form-item>
					<u-form-item label="银行卡开户公司名称" prop="card_name">
						<u-input v-model="form.card_name" type="textarea" height="50" placeholder="请填写银行卡开户公司名称" />
					</u-form-item>
					<u-form-item label="银行账号" prop="bank_account">
						<u-input v-model="form.bank_account" type="textarea" height="50" placeholder="请填写银行账号" />
					</u-form-item>
					<u-form-item label="法人电话" prop="contact_phone">
						<u-input v-model="form.contact_phone" type="textarea" height="50" placeholder="请填写法人电话" />
					</u-form-item>
					<u-form-item label="短信验证码" prop="captcha">
						<view class="flex flex-1">
							<u-input class="flex-1" v-model="form.captcha" type="number" maxlength="6"
								placeholder="请输入验证码" />
							<dy-phone-code-button :mobile='form.contact_phone' event="retrieve"></dy-phone-code-button>
						</view>
					</u-form-item>
					<u-form-item label="法人姓名" prop="legal_name">
						<u-input v-model="form.legal_name" placeholder="请填写法人姓名" />
					</u-form-item>
					<u-form-item label="法人身份证号码" prop="legal_cert_no">
						<u-input v-model="form.legal_cert_no" type="textarea" height="50" placeholder="请填写法人身份证号码" />
					</u-form-item>
					<u-form-item label="身份证正面" prop="card_front_image">
						<u-upload :auto-upload="false" ref="uUpload2" max-count="1" width="150" height="150"></u-upload>
					</u-form-item>
					<u-form-item label="身份证反面" prop="card_behind_image	">
						<u-upload :auto-upload="false" ref="uUpload3" max-count="1" width="150" height="150"></u-upload>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="" style="margin-top: 200rpx;">
			<dy-button width="576rpx" size="default" @click="sure">事业部申请</dy-button>
		</view>
		<u-picker v-model="showRegion" mode="region" @confirm="confirmRegion"></u-picker>
		<u-picker v-model="showRegRegion" mode="region" @confirm="confirmRegRegion"></u-picker>
		<u-picker v-model="show_Tj_Region" mode="multiSelector" :range="areaList" range-key="name" :default-selector="select"
			@confirm="confirm_Tj_Region" @columnchange="changeArea" ></u-picker>

		<!-- <u-select v-model="show_Tj_Region" :list="areaList" value-name="id" label-name="name"
			mode="mutil-column-auto" @change="aaa" @confirm="confirmTj_Region"></u-select> -->
	</view>
</template>

<script>
	import {
		BaseCenterApi,MineCenterApi
	} from '@/api/serves.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				areaList: [], //地区列表
				select:[0,0], //默认选中列
				level: 1, // 1查询省份  2查询市 3查询区县
				p_id: 1, // 省份id
				c_id: 2, // 城市id
				showRegion: false,
				showRegRegion: false,
				show_Tj_Region: false, //是否展示弹出层
				form: {
					tj_region: '', //	推荐人区域省市区,英文逗号隔开：广东省,广州市,天河区
					region: '', //	被推荐人区域省市区,英文逗号隔开：广东省,广州市,天河区
					business_image: '', //	营业执照
					reg_region: '', //	注册公司省市区 ,英文逗号隔开：广东省,广州市,天河区
					reg_detail: '', //	注册公司详细地址
					card_name: '', //	银行卡开户公司名称
					bank_account: '', //	银行账号
					legal_name: '', //	法人姓名
					contact_phone: '', //	法人电话
					legal_cert_no: '', //	法人身份证号码
					card_front_image: '', //	身份证正面
					card_behind_image: '', //	身份证反面
					captcha: '', // 短信验证码
				},
				rules: {
					tj_region: [{
						required: true,
						message: '请选择推荐人省市区',
						trigger: ['blur', 'change'],
					}],
					region: [{
						required: true,
						message: '请选择被推荐人省市区',
						trigger: ['blur', 'change'],
					}],
					reg_region: [{
						required: true,
						message: '请选择注册公司省市区',
						trigger: ['blur', 'change'],
					}],
					reg_detail: [{
						required: true,
						message: '请输入注册公司详细地址',
						trigger: ['blur', 'change'],
					}],
					card_name: [{
						required: true,
						message: '请输入银行卡开户公司名称',
						trigger: ['blur', 'change'],
					}],
					bank_account: [{
						required: true,
						message: '请输入银行账号',
						trigger: ['blur', 'change'],
					}],
					legal_name: [{
						required: true,
						message: '请输入法人姓名',
						trigger: ['blur', 'change'],
					}],
					contact_phone: [{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (!this.$u.test.mobile(value)) {
									callback(new Error("请输入正确的手机号码"));
								} else {
									callback();
								}
							},
						},
					],
					legal_cert_no: [{
						validator: (rule, value, callback) => {
							console.log(this.$u.test.idCard(value));
							if (this.$u.test.idCard(value)) {
								callback();
							} else {
								callback(new Error("请输入正确的身份证号码"));
							}
						}
					}, ],
					captcha: [{
						len: 6,
						required: true,
						message: '请输入6位数验证码',
						trigger: ['blur', 'change'],
					}],
				}
			}
		},
		async mounted() {
			this.$refs.uForm.setRules(this.rules);
			this.getArea()
		},
		onLoad() {
			this._applyIndex()
		},
		methods: {
			...mapActions({
				upload: 'user/upload'
			}),
			// 判断申请状态
			_applyIndex() {
				uni.showLoading()
				MineCenterApi.applyIndex().then(res => {
				 uni.hideLoading()
				  console.log('入驻配置信息', res);
				  let {merch_apply_switch,log} = res.data
				  if(merch_apply_switch == 1 && log){
					  uni.redirectTo({
					  	url: '/pages/mine/mineEnterPages/mineEnterResult/mineEnterResult?type=detail'
					  })
				  }
				})
			},
			// 省市区三级联动
			async changeArea(e){
				let {column,index} = e
				// console.log(this.select);
				this.select[column] = e.index
				// console.log(this.select);
				let params = {
					level:column === 0 ? 2 : 3, // 2查询市 3查询区县
					p_id:null,  //省id
					c_id:null  //市id
				}
				switch (params.level){
					case 2: // 2查询市
						params.p_id = this.areaList[column][index].id
						let city = await BaseCenterApi.getAreaInfo(params)
						this.$set(this.areaList,column+1,city.data)
						params.level = 3
						params.c_id = city.data[0].id
						let county = await BaseCenterApi.getAreaInfo(params)
						this.$set(this.areaList,column+2,county.data) 
						break;
					default: //3查询区县
						params.c_id = this.areaList[column][index].id
						let County = await BaseCenterApi.getAreaInfo(params)
						this.$set(this.areaList,column+1,County.data)
						break;
				}
			},
			// 初始化地区信息
			async getArea() {
				let p1 = BaseCenterApi.getAreaInfo({
					level: 1
				})
				let p2 = BaseCenterApi.getAreaInfo({
					level: 2,
					p_id: 1
				})
				let p3 = BaseCenterApi.getAreaInfo({
					level: 3,
					c_id: 2
				})
				let result = await Promise.all([p1, p2, p3])
				this.areaList = [result[0].data,result[1].data,result[2].data]
			},
			sure() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let files1 = this.$refs.uUpload1.lists
						if (!files1.length) return this.$u.toast('请上传营业执照', 2000)
						let files2 = this.$refs.uUpload2.lists
						if (!files2.length) return this.$u.toast('请上传身份证正面图片', 2000)
						let files3 = this.$refs.uUpload3.lists
						if (!files3.length) return this.$u.toast('请上传身份证反面图片', 2000)
						let task1 = this._upload(files1, 1)
						let task2 = this._upload(files2, 2)
						let task3 = this._upload(files3, 3)
						uni.showLoading()
						Promise.all([task1, task2, task3]).then((res) => {
							uni.hideLoading()
							this.form.business_image = res[0].join(',')
							this.form.card_front_image = res[1].join(',')
							this.form.card_behind_image = res[2].join(',')
							this._addMerch2()
						}).catch(err => {
							uni.hideLoading()
						})
					}
				});
			},
			_upload(lists, type) {
				return new Promise((resolve, reject) => {
					this.upload(lists).then(res => {
						resolve(res)
					})
				})
			},
			_addMerch2() {
				BaseCenterApi.addMerch2(this.form).then(res => {
					console.log('事业部申请', res);
					if (res.code == 1) {
						this.$Toast('申请成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			confirmRegion(e) {
				console.log(e);
				this.form.region = `${e.province.label},${e.city.label},${e.area.label}`
			},
			//确认后赋值
			confirm_Tj_Region(e) {
				console.log(e);
				let province = this.areaList[0][e[0]].name
				let city = this.areaList[1][e[1]].name
				let area = this.areaList[2][e[2]].name
				this.form.tj_region = `${province},${city},${area}`
			},
			confirmRegRegion(e) {
				console.log(e);
				this.form.reg_region = `${e.province.label},${e.city.label},${e.area.label}`
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep.u-form-item__message {
		padding-left: 0 !important;
	}
</style>